<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            position: relative;   
            /* 相对于框相对定位 */
            width: 500px;
            height: 300px;
            border: solid 3px #000;
            overflow: hidden;
            /* 使得超出部分的弹窗看不见 */
        }
        .box p{
            position: absolute;
            /* 绝对定位 相对于框往左往右往上往下 */
            left: 500px; 
            /* 开始在框外面 */
            white-space: nowrap; 
            /* 强制是一行 white-space */
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input type="text" id="inp">
    <button id="send">发送</button>
    <button id="show">显示弹幕</button>
    <ul id="list">

    </ul>
    <script>
        //操作元素
        var inp = document.getElementById('inp');
        var send = document.getElementById('send');
        var box = document.getElementsByClassName('box')[0];  //通过下标拿到节点对象
        var arr = [];  //用数组存弹幕的时间和内容，用于显示
        var list = document.getElementById('list');

        inp.onkeydown = function(e){
            if(e.keyCode == 13){  //是回车键
                add(); //加括号 调用函数
            }
        }
        //操作
        show.onclick = function(){
            list.innerHTML = ''; //先清空再加 不会加两遍
            for(var i=0;i<arr.length;i++){
                // var li = document.createElement('li');
                // li.innerHTML = arr[i].title + arr[i].time;
                // list.appendChild(li);
                list.innerHTML += arr[i].title + arr[i].time;
            }
        }
        send.onclick = add;  //不加括号 事件是函数 不是返回值
        function add(){
            // 内容 获取 添加到 box里面 inp.value
            if(inp.value){  //隐式转换 有值的话创建p标签  //嵌套
                arr.push({title:inp.value,time:new Date()});  //添加到arr数组
                var p = document.createElement('p'); //在标签里 一段一段 创建标签
                p.style.top = Math.random()*250 + 'px'; //不能写300 会超出去 p标签还有其默认的边距 也造成了超范围                
                p.innerHTML = inp.value; //使p标签的内容是文本框里的内容
                box.appendChild(p);   //将标签添加入筐里
                // 开始移动
                var left = 500;
                var id = setInterval(function(){
                    left--;
                    p.style.left = left + 'px';
                    if(left <= -p.clientWidth){  //负自身的宽度
                        //删除这个元素节点 否则会一直有往左动 
                        box.removeChild(p);
                        clearInterval(id); //必须关掉定时器
                    }
                },20)                
            }
            // //并列形式
            // if(!inp.value){
            //     return; //跳出函数
            // }
            // var p = document.createElement('p') //在标签里 一段一段 创建标签
            // p.innerHTML = inp.value; //使p标签的内容是文本框里的内容
            // box.appendChild(p);   //将标签添加入筐里
        }
       
    </script>
</body>
</html>